html,
body {
    padding: 0;
    margin: 0;
    font-family: "PingFang SC", sans-serif;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: #2f3542;
}

.button-wrapper {
    position: relative;
    width: 240px;
    height: 60px;
    text-align: center;
}

.rectangle {
    stroke-width: 8px;
    stroke: #ff6348;
    fill: transparent;
    /* Core part of the animation */
    stroke-dasharray: 100 500;
    stroke-dashoffset: -372;
}

.btn {
    color: white;
    font-size: 18px;
    letter-spacing: 6px;
    position: relative;
    top: -48px;
}

@keyframes extend {
    to {
        stroke-dasharray: 600;
        stroke-dashoffset: 0;
        stroke-width: 2;
    }
}

.button-wrapper:hover .rectangle {
    animation: 0.5s extend linear forwards;
}
